<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/css_reset.css">
    <link rel="stylesheet" type="text/css" href="css/header.css">
    <link rel="stylesheet" type="text/css" href="css/classify.css">
    <link rel="stylesheet" href="css/footer.css">
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="header_top">
                <h1>
                    <a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png" alt=""></a>
                </h1>
                <ul class="big_nav">
                    <li><a href="#">音乐馆</a></li>
                    <li><a href="#">我的音乐</a></li>
                    <li><a href="#">客户端</a></li>
                    <li><a href="#">开放平台</a></li>
                    <li><a href="#">VIP</a></li>
                </ul>

                <input type="search" placeholder="搜索音乐、MV、歌单、用户">
                <a href="#"><i class="icon"></i></a>
                <a href="#" class="login">
                    <p>登录</p>
                </a>
                <ul class="vip">
                    <li>开通VIP<i></i>
                        <ul class="vip1">
                            <li>开通绿钻豪华版</li>
                            <li>开通付费包</li>
                        </ul>
                    </li>
                </ul>
                <ul class="recharge">
                    <li>充值<i></i>
                        <ul class="recharge1">
                            <li>充值乐币</li>
                            <li>充值饭票</li>
                        </ul>
                    </li>
                </ul>

            </div>
            <div class="header_bottom">
                <ul>
                    <li><a href="/index.html">首页</a></li>
                    <li><a href="/singer1.html">歌手</a></li>
                    <li><a href="/songdisc.html">新碟</a></li>
                    <li><a href="/Ranking_list.html">排行榜</a></li>
                    <li><a href="/classify.html">分类歌单</a></li>
                    <li><a href="/radio_station.html">电台</a></li>
                    <li><a href="/mv.html">MV</a></li>
                    <li><a href="/Digital_album.html">数字专辑</a></li>
                    <li><a href="#">票务</a></li>
                </ul>
            </div>
        </div>
    </div>


    <div class="center">
        <div class="yuzhong">
            <h3>语种</h3>
            <ul>
                <li>国语</li>
                <li>英语</li>
                <li>韩语</li>
                <li>粤语</li>
                <li>日语</li>
                <li>更多<i></i>
                    <ul class="language">
                        <li>小语种</li>
                        <li>闽南语</li>
                        <li>法语</li>
                        <li>拉丁语</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="liupai">
            <h3>流派</h3>
            <ul class=liupaili>
                <li>流行</li>
                <li>轻音乐</li>
                <li>摇滚</li>
                <li>民谣</li>
                <li>R&B</li>
                <li>嘻哈</li>
                <li>电子</li>
                <li>古典</li>
                <li>更多<i></i>
                    <ul class="language2">
                        <li>乡调</li>
                        <li>蓝调</li>
                        <li>爵士</li>
                        <li>新世纪</li>
                        <li>拉丁</li>
                        <li>后摇</li>
                        <li>中国传统</li>
                        <li>世界音乐</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="zhuti">
            <h3>主题</h3>
            <ul class=liupaili>
                <li>AGG</li>
                <li>经典</li>
                <li>网络歌曲</li>
                <li>影视</li>
                <li>KTV热歌</li>
                <li>儿歌</li>
                <li>中国风</li>
                <li>古风</li>
                <li>更多<i></i>
                    <ul class="language3">
                        <li>情歌</li>
                        <li>城市</li>
                        <li>现场音乐</li>
                        <li>背景音乐</li>
                        <li>佛教音乐</li>
                        <li>up主</li>
                        <li>乐器</li>
                        <li>MC喊麦</li>
                        <li>DJ</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="xinqing">
            <h3>心情</h3>
            <ul class=liupaili>
                <li>伤感</li>
                <li>安静</li>
                <li>快乐</li>
                <li>治愈</li>
                <li>励志</li>
                <li>甜蜜</li>
                <li>寂寞</li>
                <li>宣泄</li>
                <li>思念</li>
            </ul>
        </div>
        <div class="changjing">
            <h3>场景</h3>
            <ul class=liupaili>
                <li>睡前</li>
                <li>夜店</li>
                <li>学习</li>
                <li>运动</li>
                <li>开车</li>
                <li>约会</li>
                <li>工作</li>
                <li>旅行</li>
                <li>更多<i></i>
                    <ul class="language4">
                        <li>派对</li>
                        <li>婚礼</li>
                        <li>咖啡馆</li>
                        <li>跳舞</li>
                        <li>校园</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="all">
        <h2>全部歌曲</h2>

        <button class="but1"><a href="#">推荐</a></button>
        <button class="but2"><a href="#">最新</a></button>
        <!-- <div class="veo"> -->
            <ul>
                <li>
                    <a href="#"><img
                        src="https://p.qpic.cn/music_cover/ANIWLicL9sLKUD0jT1eBUAa9aO41rTUTnjwAsgwlr2LTricc3VbThnwg/600?n=1"></a>
                    <h3 style="font-size: 15px;">晋江同人猫耳FM广播剧</h3>
                    <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                    <h3 style="font-size: 10px;color:#999">许yicheng</h3>

                        
                    <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/1YKE2CrgrFGgxux8RGGRibruNajcMI0IAtM0ssxkzhS4ibvmlWhpNDRA/300?n=1">
                        <h3 style="font-size: 15px;">最新古风|站内评论</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/vdz7kHPhrib5j7Hfia9GxhRbWXd4SUbQFAL5qaJialHNJUYS3QJ8dgaew/300?n=1">
                        <h3 style="font-size: 15px;">今晚梦里见</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/7cIQPnvbRsallrJyAWrv1nIyXLfeF75Fc3MkcmBydZGHNlkOlSA8lw/300?n=1">
                        <h3 style="font-size: 15px;">想听听Rapstar</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/3OABHicGI99m0KvnyMzJ93M0s6J3DMibxpPNJQsgLAoyFH5Zq95glT9w/300?n=1">
                        <h3 style="font-size: 15px;">欧美流行向</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/HNmelSLYQUCAwQE4p35EO7icjSSDhicTZDQpodlhlGTSU182wAzNukTg/300?n=1">
                        <h3 style="font-size: 15px;">想谈一场恋爱</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/2CCXpYwkpsTriccIv35ctOOPEXHvE17RMianCsYT1oQxfkeGQQTbxpDQ/300?n=1">
                        <h3 style="font-size: 15px;">说唱新时代</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/Is3vvYavVibibcadcuFwaQ1bicdHdMTwDDrgUI7vcg1nUk4ib3hZqtxHlA/300?n=1">
                        <h3 style="font-size: 15px;">使颓废的你涅槃重生</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/IKtv3iaXc7VkP2kOFgfB5sicu09CaSuyic6ib4bDyyrhLst6niaYy4m4AWg/300?n=1">
                        <h3 style="font-size: 15px;">遗憾吗关于她</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/qLmZ9geF8uPicDCvpMRI156ttLsx318Rww7LmZzJPmz4FJ5ztkdFqFQ/300?n=1">
                        <h3 style="font-size: 15px;">带你重回小时候</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/DuV1xTRaoicgc5cicRt59WTkoC0QIdpInaUEQ8fzaaxogtrkef4UwFoA/300?n=1">
                        <h3 style="font-size: 15px;">高潮踩点，点燃热血</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/gkibibM4UMibialKVxj0TEGHibPe4TibRs31TFTQs02MufclIYFgibyokOrCQ/300?n=1">
                        <h3 style="font-size: 15px;">谁说古风没人爱</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://p.qpic.cn/music_cover/xoblcnkF3yic4jCTNHjlpDNTS8YHsx7BxRDlVAhXQSfPLtksEUPHTWQ/600?n=1">
                        <h3 style="font-size: 15px;">通勤随身听</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/bFQsibroB8LXJhoIUKkjbJNLTCN5eMYYZhYbdxRDPFJghOYCDzByXicPM6zoApLzvj/300?n=1">
                        <h3 style="font-size: 15px;">融化你的心</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://p.qpic.cn/music_cover/aaxX4Babic4VicBPicJOwr5xm9NnRAg5jTLapma3smcaNdIricV9cJmJBA/600?n=1">
                        <h3 style="font-size: 15px;">补作业专用轻音乐</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://p.qpic.cn/music_cover/5Xh1Um8DriauyUvypHkkD8o9KpNDsAqNagFtbRIwDL89QBGcriaN6ghQ/600?n=1">
                        <h3 style="font-size: 15px;">所有的温柔涌向你</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://p.qpic.cn/music_cover/PiajxSqBRaEJWmNbdjoJoZsZf3cZLiceiakuJeVKDutXErc5mA6PMWK5g/600?n=1">
                        <h3 style="font-size: 15px;">难以抗拒的粤语</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://p.qpic.cn/music_cover/TbOX2PFrZeb6mGibPsTx7Z7mZ4d31Qsj2kyU8GBibaGE4iaibEibxFMUWAg/600?n=1">
                        <h3 style="font-size: 15px;">沉浸心灵的夜</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/Zqn9d9hvgT1O39PeFzU41PM58LEVvxSBpaL3vVnAvU9gsJZ6QSHZmQ/300?n=1">
                        <h3 style="font-size: 15px;">情窦初开</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
                <li>
                    <img
                        src="https://qpic.y.qq.com/music_cover/5bTvqd8KgOoYC3MvsDEcqiboP8ibOtIMBnmiaGicW8FceicadjuibuLWn8yw/300?n=1">
                        <h3 style="font-size: 15px;">纯音乐(助眠)轻音乐</h3>
                        <h3 style="font-size: 12px;color:#999">999+的热歌榜</h3>
                        <h3 style="font-size: 10px;color:#999">许yicheng</h3>
                        <p>
                            <i></i>
                        </p>
                    </li>
            </ul>
        <!-- </div> -->
        <div class="footer">
            <h1>查看更多内容 请下载客户端</h1>
            <button class="but"><a href="#">立即下载</a></button>
        </div>
       
    </div>
    
    <div class="footerbodyer">
        <div>
            <div class="footerleft">
                <div>
                    <h4>下载QQ音乐客户端</h4>
                </div>
                <div>
                    <ul class="icons">
                        <a href="">
                            <li>
                                <p>PC版</p>
                            </li>
                        </a>
                        <li>
                            <p>Mac版</p>
                        </li>
                        <li>
                            <p>Android版</p>
                        </li>
                        <li>
                            <p>iphone版</p>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3>开放平台</h3>
                    <ul class="icons1">
                        <li><a href="">QQ音乐开放平台</a></li>
                        <li><a href="">腾讯音乐人</a></li>
                    </ul>
                </div>
            </div>
            <div class="footermiddle">
                <div>
                    <h4>特色产品</h4>
                </div>
                <div>
                    <ul class="iconss">
                        <li>
                            <p>全民k歌</p>
                        </li>
                        <li>
                            <p>Super&nbsp;Sound</p>
                        </li>
                        <li>
                            <p>Qplay</p>
                        </li>
                        <li>
                            <p>Fan直播伴侣</p>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3>TME集团官网</h3>
                    <ul class="icons2">
                        <li><a href="">腾讯音乐</a></li>
                    </ul>
                </div>
            </div>
            <div class="footerright">
                <h4>合作链接</h4>
                <div class="iconsss">
                    <ul>
                        <li><a href="">CJ&nbsp;ENM</a></li>
                        <li><a href="">最新版QQ</a></li>
                        <li><a href="">QQ浏览器</a></li>
                        <li><a href="">企鹅FM</a></li>
                        <li><a href="">手机QQ空间</a></li>
                        <li><a href="">电脑管家</a></li>
                    </ul>
                    <ul>
                        <li><a href="">腾讯视频</a></li>
                        <li><a href="">腾讯社交广告</a></li>
                        <li><a href="">腾讯微云</a></li>
                        <li><a href="">智能电视网</a></li>
                         <li><a href="">腾讯云</a></li>
                        <li><a href="">当贝市场</a></li>
                    </ul>
                </div>
            </div>
            <div class="footerfooter">
                <ul class="footerlist1">
                    <li><a href="">关于腾讯|</a></li>
                    <li><a href="">About&nbsp;Tencent|</a></li>
                    <li><a href="">服务条款|</a></li>
                    <li><a href="">用户服务协议|</a></li>
                    <li><a href="">隐私政策|</a></li>
                    <li><a href="">权利声明|</a></li>
                    <li><a href="">广告服务|</a></li>
                    <li><a href="">腾讯招聘|</a></li>
                    <li><a href="">客服中心|</a></li>
                    <li><a href="">网站导航</a></li>
                </ul>
                <h5>Copyright © 1998 - 2021 Tencent. All Rights Reserved.</h5>
                <h5>腾讯公司 版权所有 网络文化经营许可证:<a href="">粤网文[2018]6725-2386号</a></h5>
            </div>
        </div>

    </div>
</body>

</html>